<template>
  <div class="container">

    <!-- 表格主体 -->
    <div class="table-container">
      <table class="custom-table">
        <thead>
          <tr>
            <th>指标名称</th>
            <th>代码</th>
            <th>数量</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="name-column">{{ item.name }}</td>
            <td class="code-column">{{ item.code }}</td>
            <td class="quantity-column" @click="startEdit($event)">
              <span>{{ item.quantity || '-' }}</span>
              <input 
                type="number" 
                class="quantity-input" 
                :value="item.quantity"
                min="0"
                @blur="finishEdit($event, index)"
                @keypress.enter="finishEdit($event, index)"
                style="display: none"
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomTable',
  
  data() {
    return {
      tableData: [
        { name: '甲', code: 'Z1', quantity: 1 },
        { name: '五、地下水站合计', code: '33', quantity: 20 },
        { name: '设站目的：1 国家站', code: '34', quantity: 10 },
        { name: '2 地方站', code: '35', quantity: 10 },
        { name: '监测层位：1 浅层', code: '36', quantity: 10 },
        { name: '2 深层', code: '37', quantity: 10 },
        { name: '监测方式：1 人工监测', code: '38', quantity: 10 },
        { name: '2 自动监测', code: '39', quantity: 10 },
        { name: '其中 地下水质监测', code: '40', quantity: null },
        { name: '其中：1 水质人工监测', code: '41', quantity: null },
        { name: '2 水质自动监测', code: '42', quantity: null }
      ]
    }
  },

  methods: {
    // 开始编辑数量
    startEdit(event) {
      const cell = event.currentTarget
      const span = cell.querySelector('span')
      const input = cell.querySelector('input')
      
      if (span && input) {
        span.style.display = 'none'
        input.style.display = 'block'
        input.focus()
        input.select()
      }
    },

    // 完成编辑并保存
    finishEdit(event, index) {
      const input = event.target
      const cell = input.parentElement
      const span = cell.querySelector('span')
      
      if (span) {
        const value = input.value.trim()
        this.tableData[index].quantity = value ? Number(value) : null
        span.textContent = value || '-'
        span.style.display = 'block'
        input.style.display = 'none'
      }
    }
  }
}
</script>

<style scoped>
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.table-container {
  overflow-x: auto;
  margin-top: 20px;
  width: 500px;
}

/* 表格样式 */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  border: 1px solid #EBEEF5;
  background: #fff;
}

.custom-table th,
.custom-table td {
  padding: 8px;
  border: 1px solid #EBEEF5;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: center;
  height: 32px;
}

.custom-table th {
  background-color: #F5F7FA;
  color: #606266;
  font-weight: 500;
  line-height: 1.2;
}

.custom-table tr:hover td {
  background-color: #F5F7FA;
}

/* 列样式 */
.name-column {
  text-align: left;
  padding-left: 15px;
  width: 50%; /* 指标名称列占50% */
}

.code-column {
  color: #909399;
  font-family: Consolas, monospace;
  width: 20%; /* 代码列占20% */
}

.quantity-column {
  color: #606266;
  font-weight: 500;
  width: 30%; /* 数量列占30% */
  position: relative;
  padding: 0 20px;
  cursor: pointer;
}

/* 数量编辑输入框样式 */
.quantity-input {
  box-sizing: border-box;
  width: calc(100% - 30px);
  padding: 4px 8px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #606266;
  outline: none;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.quantity-input:focus {
  border-color: #409EFF;
}

</style> 